<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="cunt m1280">151</div>
		<div class="botBtn m1280 f f-a-c f-j-b">
			<div @click="back" class="botBtn_left hand"><img src="/src/assets/user/lef.png" alt="" />Edit</div>
			<div class="botBtn_right f f-a-c">
				<div class="heiBtn hand">Publish</div>
				<div @click="scheduleVisible = true" class="baiBtn hand">Schedule for later</div>
			</div>
		</div>
		<el-dialog v-model="scheduleVisible" title="" width="540px">
			<div class="dialTit">Schedule for later</div>
			<div class="rili">
				<div class="titRili">Schedule a time to publish</div>
				<div class="picker">
					<el-date-picker :picker-options="pickerOptions" v-model="time" type="datetime" @change="changeFn" placeholder="Pick a Date" />
					<div class="newTime">This story will be published automatically within five minutes of the specified time.</div>
				</div>
			</div>
			<div class="dialBtn f f-a-c f-j-b">
				<div class="diaLefBtn hand">Cancel scheduling</div>
				<div class="diaRigBtn hand">Schedule to publish</div>
			</div>
		</el-dialog>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { New_YorkTimc } from "../../../uilt/setting";
	// import { New_YorkTimc } from "@/utils/setting.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let time = ref("");
	const pickerOptions = {
		timeZone: "America/New_York"
	};
	let scheduleVisible = ref(false);
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	const back = () => {
		router.go(-1);
	};
	const changeFn = e => {
		console.log(e);
		let time = New_YorkTimc(e);
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
